<!--
 * @Date: 2020-02-17 17:30:51
 * @LastEditors: peng qiao
 * @LastEditTime: 2020-03-30 17:25:11
 -->
<template>
  <div class="house_detail">
    <van-nav-bar
      title="房屋详情"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <ul class="manage_content">
      <li>
        <div class="content_key">社区</div>
        <div class="content_text">{{ houseInfo.neighborhoodName }}</div>
      </li>
      <li>
        <div class="content_key">楼栋房号</div>
        <div class="content_text">{{ houseInfo.houseName }}</div>
      </li>
      <li>
        <div class="content_key">住户类型</div>
        <div class="content_text">{{ houseInfo.relationTypeName }}</div>
      </li>
      <li>
        <div class="content_key">住户姓名</div>
        <div class="content_text">{{ houseInfo.realName }}</div>
      </li>
      <li>
        <div class="content_key">住户电话</div>
        <div class="content_text">{{ houseInfo.phone }}</div>
      </li>
    </ul>
    <van-button class="next_btn apply_btn" @click="unBind()">解 绑</van-button>
  </div>
</template>

<script>
import houseService from "@/controller/myhouse.js";
import constant from "@/controller/constant.js";
import { Dialog } from 'vant';
export default {
  name: "houseDetail",
  data() {
    return {
      houseInfo: {}
    };
  },
  mounted() {
    this.houseInfo = this.$route.query.data;
  },
  methods: {
    handleUnBind() {
      houseService.community_user_house_unbind(this.$route.query.id).then(res => {
        if (res.code === "0") {
          this.$toast("解除绑定成功！");
          this.$router.replace({name: 'neighborhoodList'})
          // this.$router.go(-1);
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    unBind() {
      Dialog.confirm({
        title: "提示",
        message: `确认解绑当前房屋?解绑操作会造成当前用户积分清0！！！`,
        confirmButtonColor: '#ff0000'
      })
        .then(() => {
          this.handleUnBind();
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../workstation/styles/workstation.scss";

.house_detail {
  height: 100%;
  background: #ffffff;

  .contact_btn {
    width: 345px;
    margin: 15px;
    border-radius: 22px;
    background: #dc4630;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
  }

  .manage_content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    background: #ffffff;

    span {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      padding: 14.5px 0 10px 0;
      width: 100%;
    }

    img {
      border-radius: 4.25px;
      width: 2.9333rem;
      height: 2.2rem;
    }

    img:nth-child(3n + 1) {
      margin-left: 7.5px;
    }

    img:nth-child(3n + 3) {
      margin-left: 7.5px;
    }

    img:nth-child(n + 5) {
      margin-top: 7.5px;
    }

    li {
      padding: 14.5px 0;
      width: 100%;
      border-bottom: 1px solid #edeff2;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    li:first-child {
      padding-top: 20px;
    }

    li:last-child {
      border: none;
    }

    .content_key {
      width: 106px;
      float: left;
    }

    .content_text {
      width: 239px;
      float: right;
      text-align: right;
    }
  }
}
</style>
